<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style type="text/css">
        body {
            background-image: url("jiaju.jpeg");
        }

        /*设置所有元素不会被撑大 ,并且盒子的宽高是边框的宽高 设置margin=0，padding=0*/
        * {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }

        body > div {
            /*最外层容器指定大小,边框，水平居中, */
            width: 850px;
            height: 400px;
            background-color: white;
            border: gray solid 8px;
            margin: 60px auto;
        }

        /* -------------------------------------------------------- */
        /*左浮动*/
        .left {
            float: left;
            width: 25%;
            margin-left: 20px;
            margin-top: 20px;
        }

        .first {
            font-size: 20px;
            color: #8c00ff;

        }

        .left p:last-child {
            font-size: 20px;
            color: gray;
        }

        /* -------------------------------------------------------- */

        .mid {
            font-size: 15px;
            float: left;
            width: 47%;
        }

        .table {
            margin-top: 25px;
            float: left;
        }

        .t-left {
            /*文字靠左边*/
            text-align: left;

        }

        .t-right {
        }

        /* 表单中的文本框，日期框，密码框使用属性选择器，宽256，高32，行高32，内边距上下6，左右12，
        圆角4，边框：1 实线 颜色#a6a6a6，右浮动*/
        input[type="text"], input[type="date"], input[type="password"], input[type="radio"]，input[type="occupation"],input[type="submit"],input[type="reset"]{
            padding-top: 6px;
            padding-bottom: 6px;
            padding-left: 10px;
            padding-right: 10px;
            border-radius: 4px; /*圆角*/
            border: gray solid 1px;
            margin-left: 30px; /*指定左边距，调节左边距的距离*/
        }

        input[type="radio"] {
        }

        /* -------------------------------------------------------- */
        .right {
            float: right;
            width: 25%;
        }

        .right p {
            font-size: 15px;
            padding: 10px 10px 0px 0px;
            float: right;
            margin-left: 30px;
        }




    </style>
</head>
<body>
<!--最外层容器-->
<div>
    <!--左容器-->
    <div class="left">
        <p class="first">新用户注册</p>
    </div>
    <!--中容器  插入表格容器-->
    <div class="mid">
        <div class="table">
            <!--表格容器中的table需要提交表单，使用form-->
            <form action="LoginServlet"  method="post">
                <table><!--用户名，密码，性别，职业，提交-->
                    <tr><!--第1行-->
                        <td class="t-left">
                            <lable for="username">用户名</lable>
                        </td>
                        <td class="t-right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>
                    <tr><!--第2行-->
                        <td class="t-left">
                            <lable for="password">密码</lable>
                        </td>
                        <td class="t-right"><input type="password" name="password" id="password" placeholder="请输入密码">
                        </td>
                    </tr>
                    <tr><!--第3行-->
                        <td class="t-left">性别</td>
                        <td class="t-right">
                            <input type="radio" name="gender" value="男">男
                            <input type="radio" name="gender" value="女">女
                        </td>
                    </tr>
                    <tr><!--第4行-->
                        <td class="t-left">职业</td>
                        <td class="t-right">
                            <select name="occupation">
                                <option>---请选择---</option>
                                    <option>医生</option>
                                    <option>老师</option>
                                    <option>警察</option>
                                    <option>律师</option>
                                    <option>其他</option>
                            </select>

                        </td>
                    </tr>
                    <tr align="center"><!--第5行-->
                        <td colspan="1">
                            <td><input type="submit" value="登录"/></td>
                            <td><input type="reset" value="取消"/></td>
                        </td>
                    </tr>
                </table>
            </form>

        </div>
    </div>
    <!--右容器  -->
    <div class="right">
        <p>已有账号？<a href="#">立即登陆</a></p>
    </div>
</div>
</body>
</html>